<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="container"></div>
    <script>
        let data = {
            "Fish": {
                "trout": {},
                "salmon": {}
            },
            "Tree": {
                "Huge": {
                    "sequoia": {},
                    "oak": {}
                },
                "Flowering": {
                    "apple tree": {},
                    "magnolia": {}
                }
            }
        };
        function appendTree(id, data) {
            var box = document.getElementById(id);
            box.append(createTree(data, 1));
        }
        function createTree(obj, level) {
            //JSON.stringify() 方法用于将 JavaScript 值转换为 JSON 字符串。
            if (JSON.stringify(obj) !== "{}") {
                console.log(JSON.stringify(obj));
                //创建一个ul元素节点
                var ul = document.createElement('ul');
                for (var key in obj) {
                    console.log(key);
                    //为每个元素创建一个li节点
                    var li = document.createElement('li');
                    console.log(li);
                    var nextLevel = level + 1;
                    console.log(nextLevel);
                    li.innerHTML = `<span data-level="${level}">${key}</span>`;
                    //递归函数
                    li.append(createTree(obj[key], nextLevel));
                    ul.append(li);
                } return ul;
            } else {
                return '';
            }
        }
        appendTree('container', data);
    </script>
</body>

</html>